<template>
	<div>
		<city-header></city-header>
		<city-search :cities = "cities" @hideAlphabet = "showAlphabetFun"></city-search>
		<city-list :cities = "cities" :hotCities = "hotCities" :letter = "letter"></city-list>
		<city-alphabet :cities = "cities" @change = "changeCity" v-show = "showAlphabet"></city-alphabet>
	</div>
</template>

<script>
	import axios from "axios"
	import cityHeader from "@/pages/City/components/header"
	import citySearch from './components/search.vue'
	import cityList   from './components/list.vue'
	import cityAlphabet   from './components/alphabet.vue'
	export default {
		name : 'city',
		components : {
			cityHeader,
			citySearch,
			cityList,
			cityAlphabet
		},
		data () {
			return {
				hotCities:[],
				cities:{},
				letter:"",
				showAlphabet:true
			}
		},
		methods : {
			showAlphabetFun () {
				this.showAlphabet = !this.showAlphabet;
			},
			getCityInfo () {
				axios.get("/api/city.json").then(this.getCityInfoSucc);
			},
			getCityInfoSucc (res) {
				if(res.data.ret && res.data.data) {
					const data = res.data.data;
					this.hotCities = data.hotCities;
					this.cities = data.cities;
				}
			},
			changeCity (letter) {
				this.letter = letter;
			}
		},
		mounted () {
			this.getCityInfo();
		}
	}
</script>

<style lang = "less" scoped>
	
</style>